<template>
  <div>

    <MenuSearch @open-add-menu="addMenu" @batch-delete="batchRemove"
                v-model="search" @search="page = 1; queryMenus()"/>

    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">
      <template #name="{ row }">
        <strong>{{ row.menuName }}</strong>
      </template>

      <template #action="{ row, index }">
        <Button v-auth:menu:bind:sys type="success" icon="md-walk" size="small" style="margin-right: 5px" @click="applySys(row.id)">
          绑定系统
        </Button>
        <Button v-auth:menu:update type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="show(row)">
          修改
        </Button>
        <Button v-auth:menu:del type="error" icon="ios-remove-circle-outline"
                size="small" @click="remove(row, index)">移除
        </Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total"
                          :items-per-page="rows" @page-click="queryMenus"
                          :show-page-size="5" force-ellipses />
        </div>
      </template>
    </Table>

    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="420"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <!-- 引入菜单表单组件 -->
      <MenuForm  ref="menuForm"
          @close-win="closeWin" :row="drawer.row"></MenuForm>
    </Drawer>


    <!--    -->
    <Modal v-model="bindSys"  title="绑定系统">
      <BindSys ref="bindSys" :menu-id="menuId" v-if="bindSys"></BindSys>
      <template #footer>
        <Button style="margin-right: 8px" @click="bindSys = false">关闭</Button>
        <Button type="primary" @click="handlerBindSys">保存</Button>
      </template>
    </Modal>

  </div>
</template>
<script>
import MenuForm from '../components/menu/MenuForm.vue'
import MenuSearch from "../components/menu/MenuSearch.vue";
import BindSys from "../components/menu/BindSys.vue";
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue'

export default {
  data() {
    return {
      page: 1,
      rows: 10,
      total: 0 ,
      bindSys: false,
      selection: [] ,
      drawer: {
         state: false,
         title: "" ,
         row: {}
      },
      search: {
         name: null ,
         state: null,
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '菜单名',
          slot: 'name',
          width: 200,
        },
        {
          title: '菜单图标',
          key: 'icon',
          width: 150,
        },
        {
          title: '顺序',
          key: 'sort',
          width: 80,
        },
        {
          title: '菜单描述',
          key: 'description'
        },
        {
          title: '状态',
          slot: 'status',
          width: 100,
        },
        {
          title: '操作',
          slot: 'action',
          width: 270,
          align: 'center'
        }
      ],
      data: [],
      menuId: null ,
    }
  },
  created() {
    this.queryMenus();
  },
  methods: {
    handlerBindSys() {
       // 1. 获取 穿梭狂 右侧的数据
      let ids = this.$refs.bindSys.targetKeys ;
      // 2. 发送异步请求
      this.$api.bindSysByMenuId(this.menuId, ids).then(ret=> {
         if (ret.data.status) {
            this.$Message.info({background: true, content: "操作成功"})
            this.bindSys = false ;
         }
      })
    },
    applySys(menuId) {
        this.menuId = menuId ;
        this.bindSys = true ;
    },
    queryMenus() {
       this.$api.queryMenusByPage({page: this.page, rows: this.rows, ...this.search}).then(ret=> {
          if (ret.data.status) {
             this.data = ret.data.data.list ;
             this.total = ret.data.data.total ;
          }
       })
    },
    addMenu() {
       this.drawer.state = true ;
       this.drawer.title = "添加菜单" ;
       this.drawer.row = {
          menuName: "" ,
          icon: "",
          sort: 1 ,
          state: true ,
          description: ""
       } ;
       this.$refs.menuForm.resetError();
    },
    show(row) {
      this.drawer.state = true ;
      this.drawer.title = "修改菜单" ;
      this.drawer.row = {...row} ;
      this.$refs.menuForm.resetError();
    },
    batchRemove() {
      if (this.selection.length == 0) {
         this.$tips.warning("请至少选择一个需要删除的菜单"); return ;
      }
      this.$tips.confirm("您确定要删除选中的所有菜单吗？").then(()=> {
         // 获取所有的菜单
         let ids = this.selection.map(menu => menu.id) ;
         // 发送异步请求
         this.$api.batchDelMenu(...ids).then(ret => {
            if (ret.data.status) {
              this.$tips.success("删除成功");
              this.queryMenus() ; // 重新查询所有的菜单
            }
         })
      })
    },
    remove(row, index) {
      this.$tips.confirm("您确定要删除该菜单吗？").then(()=> {
         this.$api.delMenu(row.id).then(ret => {
            if (ret.data.status) {
              this.$tips.success("删除成功") ;
              this.queryMenus();
            }
         })
      })
    },
    closeWin(status) {
       this.drawer.state = false ;
       if (status) {
         this.queryMenus();
       }
    }
  },
  components: {
    MenuForm,
    DotTag ,
    VanPagination,
    MenuSearch,
    BindSys
  }
}
</script>

